<template>
  <div class="head">
    <el-menu
      :default-active="$route.path"
      :class="($route.path=='/game' || $route.path=='/order')?'new-nav':'el-menu-demo'"
      mode="horizontal"
      background-color="#545c64"
      text-color="#A1B1B0"
      active-text-color="#203C40"
      router
      
    >
      <div class="nav-distribution">
        <div>
          <el-menu-item index="/">
            <img src="../assets/img/logo.png" style="width:80px" alt />
          </el-menu-item>
          <!-- <el-menu-item index="/game">电竞</el-menu-item> -->
          <el-menu-item index="/contract"><span class="fonts">秒合约交易</span></el-menu-item>
          <el-menu-item index="/agreement"><span class="fonts">合约交易</span></el-menu-item>
          <el-menu-item index="/otc"><span class="fonts">OTC交易</span></el-menu-item>
          <!-- <el-menu-item index="3">彩票</el-menu-item> -->
        </div>
        <!-- 登陆前 -->
        <div v-if="this.token==''">
          <el-menu-item index="/login">
            <span class="nav-log navActive">登陆</span>
          </el-menu-item>
          <el-menu-item index="/register">
            <span class="nav-log">注册</span>
          </el-menu-item>
          <!-- <el-menu-item index="7">
            <img src="../assets/img/qiehuan.png" style="width:24px;" alt />
          </el-menu-item> -->
        </div>
        <!-- 登陆后 -->
        <div v-else>
          <el-menu-item>
            <el-dropdown>
              <span class="el-dropdown-link">
                <div class="user">
                  <div>
                    <img src="../assets/img/geren.png" style="width:35px;" alt />
                  </div>
                  <div>
                    <span v-if="userMessage.authorizeLevel==2" class="bg-rz">已认证</span>
                    <span v-else>未认证</span> 
                    <p style="color:#fff">{{userMessage.name}}</p>
                  </div>
                </div>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="$router.push({path:'/personalCenter'})">个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>
          <!-- <el-menu-item index="7">
            <img src="../assets/img/qiehuan.png" style="width:24px;" alt />
          </el-menu-item>-->
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      nav: "1"
    };
  },
  computed: {
    ...mapState(["token","userMessage","userInfo"])
  },
  mounted() {
    this.nav = this.$route.path;
  },
  created() {
    // console.log(this.token == "");
  },
  methods:{
    logout(){
      sessionStorage.clear();
      this.$store.commit('getToken','')
      this.$router.push({path:'/login'})
    }
  }
};
</script>

<style lang="less">
.fonts{
  font-size: 16px;
}
.nav-log {
  color: #a1b1b0;
  border: 1px solid #a1b1b0;
  border-radius: 10px;
  padding: 3px 6px;
  font-size: 12px;
}
.navActive {
  background-color: #fff;
  color: #203c40;
}
.user {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 5px;
  >div:nth-child(1){
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #a1b1b0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  > div:nth-child(2) {
    margin-top: 5px;
    margin-left: 10px;
    display: block;
    line-height: 20px;
    span,
    p {
      margin: 0;
      padding: 0;
      font-size: 12px;
    }
    > span {
      background-image: linear-gradient(#717171, #d4d4d4);
      border-radius: 10px;
      padding: 4px 10px;
      color: #fff;
    }
    >.bg-rz{
      background-image: linear-gradient(#CFA66E, #FBE0B8);
    }
  }
}
// -----------------------------------------
.el-menu-demo {
  background-color: #203c40 !important;
  .el-menu.el-menu--horizontal {
    border-bottom: 0 !important;
    background-color: #203c40 !important;
  }
  .el-menu,
  .el-menu-item {
    background-color: #203c40 !important;
  }
  .el-menu-item.is-active {
    color: #ffffff !important;
  }
}
.el-submenu__title {
  background-color: #203c40 !important;
}
.new-nav {
  background-color: #fff !important;
  .el-menu.el-menu--horizontal {
    border-bottom: 0 !important;
    background-color: #fff !important;
  }
  .el-menu,
  .el-menu-item {
    background-color: #fff !important;
  }
  .el-menu-item.is-active {
    color: #cfa66e !important;
  }
}
#app .nav-distribution {
  padding: 5px 20px;
}
</style>
